<template>
  <!-- 标签模板 => 对应记忆对照html文件中的<html>标签结构 -->
  <!-- vue模板标签中，只能有一个根标签 -->
  <div id="app">
    <!-- <p>xxx</p> -->
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  
    <!-- 3. 使用：通过标签的形式，来使用组件 -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <!-- <Demo1 msg="Welcome to Your Vue.js App" />
    <Demo2 msg="Welcome to Your Vue.js App" />
    <Demo3 msg="Welcome to Your Vue.js App" /> -->
    <!-- <Demo4 msg="Welcome to Your Vue.js App" /> -->
    <!-- <Demo5 msg="Welcome to Your Vue.js App" /> -->
    <Demo msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
  // JS相关的代码
  // 在JS中，有一个 export default {} 结构，在这个结构中需要遵循vue的代码规则
  // 1. 引入： import 引入组件

  import Demo from './components/08-v-show和v-if.vue'

  export default {
    
    name: 'App',
    // 2. 注册：在components对象中注册组件
    components: {
      Demo
    }
  }
</script>

<style scoped>
/* 当前组件样式表 - 期望每个组件中的style标签只能影响当前组件中的标签内容 */
/* 只需要在style标签中添加一个属性 - scoped 就可以让样式只作用于当前组件的标签 */
/* 原理：scoped属性，会为每一个样式表自动添加当前组件中所被设置的自定义属性（data-v-hash随机数），形成一个符合选择器，而能被选中的标签均存在于当前组件中，所以可以被区分开 */
/* 规律/要求：只要组件需要设置style样式，就在style标签中添加scoped属性 */

</style>

